<template>
  <div class="kafka-config">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>Kafka 配置管理</span>
        <el-button type="primary" @click="showAddDialog" size="small" icon="el-icon-plus" class="add-config-btn">添加配置</el-button>
      </div>
      
      <!-- 配置列表 -->
      <div class="table-container">
        <el-table 
          :data="kafkaConfigs" 
          border 
          stripe 
          style="width: 100%;">
          <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="URL" min-width="250" show-overflow-tooltip></el-table-column>
          <el-table-column prop="topic" label="Topic" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" min-width="160" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button @click="showEditDialog(scope.row)" type="primary" size="mini" plain>编辑</el-button>
              <el-button @click="deleteConfig(scope.$index)" type="danger" size="mini" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 添加/编辑对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="Topic" prop="topic">
            <el-input v-model="form.topic"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveConfig">确定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { kafkaConfigApi } from '@/api';

export default {
  name: 'KafkaConfig',
  data() {
    return {
      kafkaConfigs: [],
      dialogVisible: false,
      dialogTitle: '添加配置',
      editIndex: -1,
      form: {
        name: '',
        url: '',
        topic: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入URL', trigger: 'blur' }
        ],
        topic: [
          { required: true, message: '请输入Topic', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 从数据库加载配置
    this.loadKafkaConfigs();
  },
  methods: {
    // 加载所有Kafka配置
    loadKafkaConfigs() {
      console.log('开始加载Kafka配置...');
      
      kafkaConfigApi.listKafkaConfigs().then(response => {
        console.log('收到Kafka配置列表响应:', response);
        
        if (response.code === 0) {
          this.kafkaConfigs = response.data;
          console.log('成功加载配置:', this.kafkaConfigs);
        } else {
          this.$message.error(response.message || '加载配置失败');
          console.error('加载配置失败:', response.message);
        }
      }).catch(error => {
        console.error('加载配置失败详细信息:', error);
        this.$message.error('加载配置失败，请检查网络连接');
      });
    },
    showAddDialog() {
      this.dialogTitle = '添加配置';
      this.form = {
        name: '',
        url: '',
        topic: ''
      };
      this.editIndex = -1;
      this.dialogVisible = true;
    },
    showEditDialog(row) {
      this.dialogTitle = '编辑配置';
      this.form = { ...row };
      this.editIndex = this.kafkaConfigs.findIndex(config => config.id === row.id);
      this.dialogVisible = true;
    },
    saveConfig() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const configData = { ...this.form };
          
          // 如果是编辑现有配置，添加ID
          if (this.editIndex !== -1) {
            configData.id = this.kafkaConfigs[this.editIndex].id;
          }
          
          kafkaConfigApi.saveKafkaConfig(configData).then(response => {
            if (response.code === 0) {
              this.dialogVisible = false;
              this.$message.success(response.message || '配置已保存');
              // 重新加载配置列表
              this.loadKafkaConfigs();
            } else {
              this.$message.error(response.message || '保存配置失败');
            }
          }).catch(error => {
            console.error('保存配置失败:', error);
            this.$message.error('保存配置失败，请检查网络连接');
          });
        }
      });
    },
    deleteConfig(index) {
      const config = this.kafkaConfigs[index];
      
      this.$confirm('确认删除此配置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        kafkaConfigApi.deleteKafkaConfig(config.id).then(response => {
          if (response.code === 0) {
            this.$message.success(response.message || '配置已删除');
            // 重新加载配置列表
            this.loadKafkaConfigs();
          } else {
            this.$message.error(response.message || '删除配置失败');
          }
        }).catch(error => {
          console.error('删除配置失败:', error);
          this.$message.error('删除配置失败，请检查网络连接');
        });
      }).catch(() => {
        // 取消删除
      });
    }
  }
}
</script>

<style scoped>
.kafka-config {
  width: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.box-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 100%;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

/* 修改深度选择器语法 */
::v-deep .el-card__body {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.clearfix span {
  font-weight: 600;
  font-size: 18px;
  color: #303133;
}

.add-config-btn {
  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.add-config-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b1ff 0%, #85ce61 100%);
}

.add-config-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

/* 表格全局强制样式 */
::v-deep .el-table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

::v-deep .el-table__header-wrapper,
::v-deep .el-table__body-wrapper {
  width: 100% !important;
}

::v-deep .el-table__header,
::v-deep .el-table__body {
  width: 100% !important;
  table-layout: fixed !important;
}

::v-deep .el-table__row {
  width: 100%;
}

::v-deep .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-table .el-button {
  margin-right: 8px;
}

::v-deep .el-table .el-button:last-child {
  margin-right: 0;
}
</style>